<template>
  <view class="select-address flexc">
    <view class="search-box">
      <view class="search flex">
        <image src="/static/order/search.png" mode="aspectFit"></image>
        <input
          class="flex1"
          type="text"
          v-model="keyword"
          confirm-type="搜索"
          @input="searchBtn"
          :placeholder="isyzh != 0 ? '搜索养殖户' : '搜索产品效率更高'" />
        <image
          v-show="keyword.length > 0"
          src="/static/order/c.png"
          mode="aspectFit"
          class="close"
          @click="closeSearch"></image>
      </view>
    </view>
    <view class="flex1 over wrap">
      <scroll-view scroll-y="true" style="height: 100%" @scrolltolower="sl">
        <template v-if="list.length > 0">
          <view
            class="box flex"
            v-for="(item, index) in list"
            :key="index"
            @click="backBtn(index)">
            <text
              v-if="item.titleList.length > 0"
              :class="['box-t', val.s == 1 ? 'box-ac' : '']"
              v-for="val in item.titleList"
              :key="val">
              {{ val.t }}
            </text>
            <text v-if="item.titleList.length == 0">{{ item.title }}</text>
          </view>
        </template>
        <template v-else>
          <view class="no">当前{{ isyzh != 0 ? "养殖户" : "地址" }}未存在</view>
        </template>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      keyword: "",
      isyzh: 0,
      page: 1,
      nomore: false,
      num: 1,
    };
  },
  onLoad(options) {
    this.isyzh = options.isyzh || 0;
    this.num = options.num || 1;
    this.getAddress();
    uni.setNavigationBarTitle({
      title: this.isyzh != 0 ? "选择养殖户" : "选择地址",
    });
  },
  // created() {
  //   this.getAddress();
  // },

  methods: {
    sl() {
      if (this.nomore) return;
      this.page++;
      this.getAddress(true);
    },
    closeSearch() {
      this.keyword = "";
      this.getAddress();
    },
    backBtn(k) {
      uni.setStorageSync("checkAddress", JSON.stringify(this.list[k]));
      this.toBack();
    },
    searchBtn() {
      this.getAddress();
    },
    getAddress(flg = false) {
      const page = flg ? this.page : (this.page = 1);
      const params = {
        keyword: this.keyword,
      };
      if (this.isyzh != 1) {
        this.list = [];
        params.type = this.num == 1 ? "2" : "1";
      } else {
        params.page = page;
        params.limit = 20;
      }
      this.$api({
        url:
          this.isyzh == 1
            ? "/farmer_list"
            : this.isyzh == 2
            ? "/getFarmer"
            : "/address_list",
        method: "get",
        data: params,
      }).then((res) => {
        if (this.isyzh == 1 && res.code == 200) {
          res.data.list.forEach((item) => (item.titleList = []));

          if (flg) {
            this.list = this.list.concat(res.data.list);
          } else {
            this.list = res.data.list;
          }
          this.nomore = res.data.count / 10 > page ? false : true;
          if (this.keyword && res.data.list.length > 0) {
            this.searchComputed();
          }
        } else if (res.code == 200 && res.data.length > 0) {
          res.data.forEach((item) => (item.titleList = []));
          this.list = res.data;
          if (this.keyword && res.data.length > 0) {
            this.searchComputed();
          }
        }
      });
    },
    searchComputed() {
      this.list = this.list.map((item) => {
        const title = item.title.split("");
        item.titleList = [];

        title.forEach((val) => {
          let obj = {
            t: "",
            s: 0,
          };
          if (this.keyword.indexOf(val) > -1) {
            obj.s = 1;
            obj.t = val;
          } else {
            obj.t = val;
            obj.s = 0;
          }
          console.log(obj, "obj--------");
          item.titleList.push(obj);
        });

        return item;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-address {
  width: 100%;
  height: 100%;
  .search-box {
    background: #fff;
    padding: 24upx 0 12upx;
  }
  .search {
    margin: 24upx auto;
    width: 674rpx;
    height: 80rpx;
    background: #f6f7f9;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    padding: 24upx 20upx 24upx 32upx;
    & > image {
      width: 32upx;
      height: 32upx;
    }

    & > input {
      font-size: 28upx;
      margin-left: 18upx;
    }
    ::-webkit-input-placeholder {
      color: #9695a3;
    }
  }
  .wrap {
    padding: 0 36upx;
    background: #fff;
    .box {
      font-size: 32rpx;
      color: #171717;
      padding: 32upx 0;
      border-bottom: 1rpx solid #eeeeee;
      &-t {
        font-size: 32rpx;
        color: #171717;
      }
      &-ac {
        color: #da4334;
      }
    }
  }
  .no {
    text-align: center;
    padding: 40upx 0;
    color: #ccc;
  }
}
</style>
